<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-cog"></i>
      Global Preferences
    </h2>
    <p class="settings-description">
      Configure global settings for your Booklore instance, including cover image handling, search preferences, and file upload limits.
    </p>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-image"></i>
          Book Cover Image
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Regenerate Covers</label>
              <p-button
                label="Regenerate"
                icon="pi pi-refresh"
                outlined="true"
                size="small"
                severity="info"
                (onClick)="regenerateCovers()">
              </p-button>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Regenerates cover images for all EPUB and PDF books (excluding locked ones) from the embedded covers in the file.
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-search"></i>
          Search & Recommendations
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Auto Book Search</label>
              <p-toggleswitch
                [(ngModel)]="toggles.autoBookSearch"
                (onChange)="onToggleChange('autoBookSearch', $event.checked)">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Automatically attempts metadata matching when the book information panel is opened.
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Similar Book Recommendation</label>
              <p-toggleswitch
                [(ngModel)]="toggles.similarBookRecommendation"
                (onChange)="onToggleChange('similarBookRecommendation', $event.checked)">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Enables or disables similar book recommendations based on your library.
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-upload"></i>
          File Management
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">Max File Upload Size</label>
              <div class="input-group">
                <div class="input-with-unit">
                  <input
                    type="text"
                    pInputText
                    [(ngModel)]="maxFileUploadSizeInMb"
                    placeholder="Max size"/>
                  <span class="unit">MB</span>
                </div>
                <p-button label="Save" outlined severity="success" (onClick)="saveFileSize()"></p-button>
              </div>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Defines the maximum allowed size (in MB) for each uploaded file. Applies to EPUB, PDF, CBZ, CBR, and CB7 formats.
            </p>
            <div class="warning-message">
              <i class="pi pi-exclamation-triangle"></i>
              <span>Changes will take effect after restarting the server</span>
            </div>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">CBX Cache Size</label>
              <div class="input-group">
                <div class="input-with-unit">
                  <input
                    type="text"
                    pInputText
                    [(ngModel)]="cbxCacheValue"
                    placeholder="Cache size"/>
                  <span class="unit">MB</span>
                </div>
                <p-button label="Save" severity="success" outlined (onClick)="saveCacheSize()"></p-button>
              </div>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              Limits the total size (in MB) of the CBX image cache. If exceeded, older cache entries are removed automatically.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
